<template>
  <div class="css-navigator">
    <div
      :class="['nav-item', current.name === item.name ? 'active' : 'default']"
      v-for="(item, index) in cssLabelList"
      :key="index"
      @click="onClickAction('nav-item', item)"
    >
      <span>{{ item.name }}</span>
      <i
        :class="[
          'iconfont',
          'icon-eye',
          currentPreview === index ? 'active' : 'default',
        ]"
        @click.stop="onClickAction('nav-preview', index)"
      ></i>
    </div>
    <div class="nav-item-new">
      <input
        v-model="labelCreating"
        placeholder="+ 键入标签名，回车！"
        @keyup.enter="onClickAction('nav-create', $event)"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { State, Action } from '@/store';
import { Mutation } from 'vuex-class';
import { ApiState, StoreRequest, StoreRequestTd } from '@/store';
import { apiCssLabelList, apiCssLabelAdd } from '@/http/api/css';
@Component
export default class CssNavigator extends Vue {
  private current: { name?: string } = {};
  private currentPreview: number = -1;
  private labelCreating: string = '';
  @ApiState(apiCssLabelList.config.name)
  private cssLabelList!: [];
  @Mutation('postCssLabel', { namespace: 'css' })
  private postCssLabel!: (data: { name: string }) => void;
  public resetCurrent() {
    this.current = {};
  }

  private mounted() {
    apiCssLabelList().then(res => {
      if (res.status) {
        // console.log(res.data.data[0].name);
      }
    });
  }

  private onClickAction(type: string, model: any) {
    switch (type) {
      case 'nav-item':
        if (this.current!.name === model.name) {
          this.current = {};
          this.$emit('nav-item', {});
        } else {
          this.current = model;
          this.$emit('nav-item', JSON.parse(JSON.stringify(model)));
        }
        break;
      case 'nav-preview':
        this.currentPreview = model;
        break;
      case 'nav-create':
        if (this.labelCreating) {
          apiCssLabelAdd({
            data: {
              name: this.labelCreating,
            },
          }).then(res => {
            if (res.data.success) {
              this.labelCreating = '';
              model.target.blur();
              apiCssLabelList();
            }
          });
        }
        break;
    }
  }
}
</script>
<style lang="less">
.css-navigator {
  @nav-height: 32px;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: #f0f0f0;
  > .nav-item {
    height: @nav-height;
    line-height: @nav-height;
    position: relative;
    // border: dashed 1px transparent;
    // border-radius: 3px;
    background-color: #f0f0f0;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    > span {
      padding: 0 8px;
      flex: 1 1 100%;
    }
    > i {
      flex: 0 0 auto;
      right: 0;
      bottom: 0;
      padding: 0 8px;
      cursor: pointer;
      visibility: hidden;
      &.default {
        color: #666;
        &:hover {
          box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
          background-color: rgba(255, 255, 255, 0.5);
          visibility: visible;
        }
      }
      &.active {
        color: white;
        background-color: #333;
        visibility: visible;
      }
    }
    &:hover i {
      visibility: visible;
    }
    &.default {
      span:hover {
        color: orangered;
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
      }
    }
    &.active {
      background-color: orangered;
      color: white;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    }
  }
  > .nav-item-new {
    position: relative;
    display: flex;
    flex-direction: column;
    input {
      box-sizing: border-box;
      height: @nav-height;
      padding: 1px 8px;
      border: none;
      outline: none;
      font-size: 16px;
      background-color: transparent;
      text-decoration: line-through;
      color: #999;
      &:focus {
        box-shadow: inset 0 0 5px rgba(255, 68, 0, 0.5);
        color: orangered;
        background-color: white;
        text-decoration: none;
      }
      &::placeholder {
        background-color: transparent;
        font-size: 14px;
      }
    }
  }
}
</style>